<template>
  <div id="menubox" class="fs" :style="{ top: top, left: left }">
    <div
      style="margin-right:3.6rem"
      @mouseover="mouseover"
      @click="handelmenu"
      :class="active == 0 ? 'active' : ''"
      class="button"
    >
      <i class="iconfont icon-dingwei1"></i> {{ name }}
      <div class="itembox triangle">
        <div
          @click="handelitem(item.path)"
          v-for="(item, index) in menulist"
          :key="index"
          class="item"
          :class="'item' + index"
        >
          <div>
            <i
              style="padding-left:.1rem"
              class="iconfont"
              :class="item.icon"
            ></i>
            <span style="padding-right:.1rem">{{ item.name }}</span>
          </div>
          <div
            v-show="item.children.length > 0"
            @click="handelitem(item2.path)"
            v-for="(item2, index2) in item.children"
            :key="index2"
            class="item"
          >
            <div style="padding-left:.3rem">
              <span>{{ item2.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="show"
      @click="handelanalyse"
      :class="active == 1 ? 'active' : ''"
      class="button"
    >
      <i class="iconfont icon-duibi"></i> 对比分析
    </div>
    <div
      v-if="show"
      @click="handelsheet"
      :class="active == 2 ? 'active' : ''"
      class="button"
    >
      <i class="iconfont icon-tongjibaobiao"></i> 统计报表
    </div>
    <a-input-search
      class="search-input"
      placeholder="请输入搜索关键字"
      size="large"
      @search="onSearch"
    >
      <a-button type="primary" slot="enterButton">
        <a-icon type="search" />搜索
      </a-button>
    </a-input-search>
  </div>
</template>

<script>
export default {
  name: "menubox",
  props: {
    show: {
      type: Boolean,
      default: true,
    },
    top: {
      type: String,
      default: "0.2rem",
    },
    left: {
      type: String,
      default: "0.1rem",
    },
  },
  data() {
    return {
      name: "小额资金",
      active: true,
      activeIndex: -1,
      menulist: [
        {
          name: "清廉村居数据库",
          icon: "icon-wulumuqishigongandashujuguanlipingtai-ico-",
          path: "/index",
        },
        {
          name: "街道社区小型工程",
          icon: "icon-gongcheng-2",
          path: "/businessdetail",
        },
        {
          name: "街道社区房产出租",
          icon: "icon-ershoufang-copy",
          path: "/housedetail",
        },
        {
          name: "小微权力",
          icon: "icon-G_xiangshoudibaotiqu_xsdbtq",
          path: "/capitaldetail",
        },
        // {
        //   name: "小额资金",
        //   icon: "icon-50",
        //   path: "/capitaldetail",
        // },
        {
          name: "经合社三资管理",
          icon: "icon-xiangmu",
          path: "",
          children: [
            {
              name: "资产管理",
              icon: "",
              path: "/assets",
            },
            {
              name: "小额资金",
              icon: "",
              path: "/capitalanalysis",
            },
            {
              name: "合同管理",
              icon: "",
              path: "/resources",
            },
          ],
        },

        {
          name: "预警模型设置",
          icon: "icon-shezhi",
          path: "100",
        },
        {
          name: "权限分配",
          icon: "icon-quanxianfenpei",
          path: "",
        },
      ],
    };
  },
  created() {},
  mounted() {
    // this.obj = this.menulist.filter(e => e.path == this.$route.path);
    console.log(this.$route.meta.title);
    this.name = this.$route.meta.title;
  },
  destroyed() {},

  methods: {
    onSearch(value) {
      this.$emit("handelClick", value);
    },
    handelmenu() {
      this.active = 0;
    },
    handelanalyse() {
      this.active = 1;
      this.$emit("handelClick");
    },
    handelsheet() {
      this.active = 2;
    },
    handelitem(path) {
      if (path == "100") {
        this.$bus.$emit("handelWarning");
      } else {
        this.$router.push(path);
      }
    },
    mouseover() {
      this.active = 0;
    },
    mouseout() {
      this.active = -1;
    },
  },
};
</script>

<style lang="scss" scoped>
#menubox {
  // width: 100vw;
  position: fixed;
  // top: 0.2rem;
  // left: 0.1rem;
  z-index: 999999;

  .button {
    margin-right: 0.2rem;
    display: inline-block;
    cursor: pointer;
    width: 2.3rem;
    // padding: 0 .1rem;
    height: 0.44rem;
    line-height: 0.44rem;
    text-align: center;
    font-size: 0.12rem;
    color: #fff;
    background: url(../../assets/img/threezi/btn.png) center no-repeat;
    background-size: 100% 100%;
    &.active {
      background: url(../../assets/img/threezi/btnh.png) center no-repeat;
      background-size: 100% 100%;
    }
    &:nth-of-type(1) {
      width: 3.2rem;
      position: relative;
      &:hover .itembox {
        overflow: visible;
        height: 1100%;
      }
    }
    .iconfont {
      font-size: 0.12rem;
      margin-right: 0.06rem;
    }
  }
  .itembox {
    height: 0;
    overflow: hidden;
    // width: 1.42rem;
    text-align: left;
    position: absolute;
    top: 0.56rem;
    background-color: #023168;
    transition: height 0.2s;
    &.triangle::after {
      top: -0.2rem;
      left: 50%;
      transform: translateX(-50%);
    }

    .item {
      font-size: 0.12rem;
      display: -webkit-box;
      /*autoprefixer: ignore next*/
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      &:hover {
        color: $QS;
        background-color: #1272ee;
      }
      &.item4:hover {
        color: #fff;
        background-color: #023168;
      }
    }
  }
}
</style>
